<template>
  <el-main style="height: 100%;">
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-input v-model="username" placeholder="请输入姓名" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>
          <el-input v-model="email" placeholder="请输入邮箱" suffix-icon="el-icon-message" style="margin-right: 10px;"></el-input>
          <el-input v-model="address" placeholder="请输入地址" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>
          <el-button @click="search(this)">搜索</el-button>
          <el-button type="warning" @click="reset(this)">重置</el-button>
        </div>
         
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-button type="primary" @click="handleDialog('add',null)">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="warning">修改 <i class="el-icon-circle-check"></i></el-button>
          <el-button type="danger" @click="delUserss">批量删除 <i class="el-icon-remove-outline"></i></el-button>
          <el-button type="danger" @click="test()"> 测试</el-button>
          &nbsp;&nbsp;&nbsp;
          <el-upload action="http://localhost:8081/user/import"
          :limit="1"
          :show-file-list="false"
          :accept="'xlsx'"
          @on-success="handleSuccess"
          >
            <el-button type="success" >导入<i class="el-icon-download"></i></el-button>
          </el-upload>
          &nbsp;&nbsp;&nbsp;
          <el-button type="success" @click="exportExcel">导出 <i class="el-icon-upload2"></i></el-button>
        </div>

        
        <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" ></el-table-column>
          <el-table-column prop="username" label="姓名" ></el-table-column>
          <el-table-column prop="nickname" label="昵称" ></el-table-column>
          <el-table-column prop="role" label="角色" ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column prop="email" label="电子邮箱"></el-table-column>
          <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <el-table-column prop="update_time" label="更改时间"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              &nbsp;&nbsp;
              <el-button type="warning" round @click="handleDialog('edit',scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
              <el-button type="danger" round @click="del(scope.row.id)">删除 <i class="el-icon-error"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="pages"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 表单弹窗 -->
<el-dialog title="信息增加/修改" :visible.sync="dialogFormVisible">  
  <el-form :model="form" label-width="70px">
    <el-form-item label="用户名" >
      <el-input v-model="form.username" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="昵称" >
      <el-input v-model="form.nickname" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="角色" >
      <el-input v-model="form.role" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" >
      <el-input v-model="form.email" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" >
      <el-input v-model="form.address" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" >
      <el-input v-model="form.phone" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleAction">确 定</el-button>
  </div>
</el-dialog>
  </el-main>
</template>

<script>
import {fenYe,searchBySome,addUSer,updateUser,delUser,delUsers} from "@/api/fenye"
export default {
    data() {
    return {
      pages:[4,6,8,10],
      tableData: null,
      total:0,
      pageIndex:1,
      pageSize:4,
      username:"",
      email:"",
      address:"",
      dialogFormVisible:false,
      form:{},
      action:"add",
      multipleSelection:[]
    }
  },
  created(){
    this.loadMessage()
    this.pageSize=this.pages[0]
  },
  methods:{
    handleSizeChange(changeSize){
      this.pageSize=changeSize
      this.loadMessage()
    },
    handleCurrentChange(chageIndex){
      this.pageIndex=chageIndex
      this.loadMessage()
    },
    async loadMessage(){
      const res=(await fenYe(this.pageIndex,this.pageSize)).data
      this.tableData=res.findUser
      this.total=res.total
  },
  async search(){
    const res=await searchBySome(this.username,this.email,this.address)
    console.log(res)
    this.tableData=res.findUser
    this.total=res.total
    this.username=""
    this.email=""
    this.address=""
  },
  async reset(){
    this.username=""
    this.email=""
    this.address=""
    this.loadMessage()
  },
  handleDialog(action,attribute){
    this.action=action
    if(this.action==='add'){
    this.form={}
  }else{
    this.form=attribute
  }
    this.dialogFormVisible=true
  },
  async handleAction(){
    if(this.action==='add'){
      const res=await addUSer(this.form)
      if(res.code===200){
        this.$message.success("增加成功")
        this.dialogFormVisible=false
      }
    }else{
      const temp=this.form
      temp.create_time=new Date(temp.create_time).getTime();
      temp.update_time=new Date(temp.update_time).getTime();
      const res=await updateUser(temp)
      if(res.code===200){
        this.$message.success("修改成功")
        this.dialogFormVisible=false
      }
    }
  },
  async del(id){
    console.log(id)
    const res=await delUser(id)
    if (res.code===200){
      this.$message.success("删除成功")
    }else{
      this.$message.error(res.msg)
    }
  },
  //获取所选中的值
  handleSelectionChange(val){
    this.multipleSelection=val
  },
  async delUserss(){
    let ids=this.multipleSelection.map(v=>v.id)
    console.log(ids)
    const res=await delUsers(ids)
    if (res.code===200){
      this.$message.success("删除成功")
      this.loadMessage()
    }else{
      this.$message.error(res.msg)
    }
  },
  async exportExcel(){
    window.open('http://localhost:8081/user/export')
  },
  handleSuccess(){
    this.$message.success("文件上传成功")
  }
  },
  
}
</script>

<style>

</style>